<template>
  <div class="targetTable">
    <el-table
      ref="table"
      :row-key="rowkey"
      :reserve-selection="true"
      v-loading="loading"
      :show-header="showHeader"
      :data="realTableData"
      :row-class-name="tableRowClassName"
      :height="tableHeight"
      :row-style="{ height: rowheight || '' }"
      element-loading-text="加载中"
      :style="{ width: '100%', minHeight: minHeight }"
      :empty-text="noDataShow"
      v-bind="$attrs"
      @row-click="singleElection"
      @selection-change="handleSelectionChange"
    >
      <!-- 空数据展示，可以不用 -->
      <template slot="empty">
        <!-- <img src="@/assets/kongshuju.png" alt="" style="width:50px;height:50px;" class="mt-20"> -->
        <p class="noCart">{{ noDataShow }}</p>
      </template>
      <!-- 是否有全选列 -->
      <el-table-column
        v-if="selection"
        :fixed="commonFixed ? 'left' : false"
        :selectable="selectFn"
        align="center"
        width="55"
        type="selection"
      />
      <!-- 是否有单选框 -->
      <el-table-column align="center" width="35" v-if="radiobox">
        <template slot-scope="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio
            class="radio"
            v-model="templateSelection"
            :label="scope.row.id"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
      <!-- 是否有展开列 -->
      <el-table-column v-if="expand" type="expand">
        <template slot-scope="props" v-if="props.row.children">
          <hk-table
            style="padding-left: 30px"
            :tableData="props.row.children"
            :table-columns="tableColumns"
            :expand="!!props.row.children"
            :operate="true"
            :showPag="false"
          >
          </hk-table>
        </template>
      </el-table-column>
      <!-- 是否显示序号 -->
      <el-table-column
        v-if="showIndex"
        label="序号"
        align="center"
        :fixed="fixIndex ? 'left' : false"
        width="55"
        type="index"
        :index="indexMethod"
      />
      <!-- prop是对应列内容的字段名 width是对应列宽度 sortable是是否排序 label是对应列名称 -->

      <el-table-column
        v-for="(item, index) in tableColumns"
        :sortable="item.sortable"
        :key="index"
        :prop="item.param"
        :width="item.width ? item.width : ''"
        :label="item.label"
        :align="item.align || 'left'"
        :fixed="item.fixed"
        show-overflow-tooltip
      >
        <!-- 具名插槽 -->
        <template slot-scope="scope">
          <template v-if="item.type !== 'slot'">
            <span>{{ scope.row[item.param] }}</span>
          </template>
          <template v-else>
            <slot
              :name="item.param"
              :row="isNeedIndex ? scope : scope.row"
            ></slot>
          </template>
        </template>
      </el-table-column>
      <!-- 操作插槽 -->
      <el-table-column
        label="操作"
        v-if="operate"
        align="center"
        :fixed="commonFixed ? 'right' : false"
      >
        <template slot-scope="scope">
          <slot
            :row="
              isNeedIndex ? { row: scope.row, index: scope.$index } : scope.row
            "
            name="operate"
          >
          </slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <pagination
      :total="total"
      :page.sync="queryParamsData.current"
      :limit.sync="queryParamsData.size"
      @pagination="changePage"
      v-if="total >= 0 && showPag"
    />
  </div>
</template>

<script>
import RenderColumn from "./RenderColumn.vue";
import Pagination from "../Pagination.vue";

export default {
  components: { RenderColumn, Pagination },
  name: "hk-table",
  data() {
    return {
      isloading: this.loading,
      realTableData: [],
      templateSelection: "",
      checkList: [],
    };
  },
  props: {
    isNeedIndex: {
      type: Boolean,
      default() {
        return false;
      },
    },
    fixIndex: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 是否显示单选框
    radiobox: {
      type: Boolean,
      default: false,
    },
    total: {
      type: Number | String,
      default: 0,
    },
    rowkey: {
      type: String | Function,
      default: "",
    },
    selectThing: {
      type: Boolean,
      default: false,
    },
    showHeader: {
      // 是否显示表头
      type: Boolean,
      default: true,
    },
    loading: {
      // 预加载
      type: Boolean,
      default: false,
    },
    selectFn: {
      // 全选禁用方法
      type: Function,
      default: () => {
        return true;
      },
    },
    tableData: {
      // 表格数据
      type: Array,
      default: () => {
        return [];
      },
    },
    tableColumns: {
      // 表头数据
      type: Array,
      default: () => {
        return [];
      },
    },

    expand: {
      // 展开
      type: Boolean,
      default: false,
    },
    selection: {
      // 全选
      type: Boolean,
      default: false,
    },
    selectionFixed: {
      // 全选是否固定
      type: Boolean,
      default: false,
    },
    // 前面和操作面是否固定
    commonFixed: {
      // 全选是否固定
      type: Boolean,
      default: false,
    },
    showIndex: {
      // 顺序
      type: Boolean,
      default: false,
    },
    operate: {
      // 操作
      type: Boolean,
      default: false,
    },

    tableHeight: {
      // 高度
      type: Number,
      default: () => null,
    },
    rowheight: {
      // 行高
      type: String,
      default: () => null,
    },
    minHeight: {
      type: String,
      default: () => "",
    },
    noDataShow: {
      // table中间无数据展示
      type: String,
      default: () => "目前没有任何内容",
    },
    // 分页器部分
    queryParams: {
      type: Object,
      default: () => {
        return { current: 1, size: 10 };
      },
    },
    // 是否显示分页器
    showPag: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    queryParamsData() {
      return this.queryParams;
    },
  },
  methods: {
    indexMethod(index) {
      if (!this.queryParamsData.current || !this.queryParamsData.size) {
        return index + 1;
      } else {
        this.queryParamsData.current =
          this.queryParamsData.current >= 1 ? this.queryParamsData.current : 1;
        return (
          index +
          (this.queryParamsData.current - 1) * this.queryParamsData.size +
          1
        );
      }
    },
    // 单选
    singleElection(row) {
      this.templateSelection = row.id;
      this.checkList = this.tableData.filter((item) => item.id === row.id);
      this.$emit("singleElection", this.checkList);
    },

    // 获取列表
    getList() {
      this.realTableData = this.tableData;
    },
    changePage() {
      this.$emit("changePage", {
        current: this.queryParamsData.current,
        size: this.queryParamsData.size,
      });
    },
    selectableFn(row, index) {},

    // 多选
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    tableRowClassName(row, rowIndex) {
      // 有空优化
      if (this.$parent.tableRowColor) {
        return this.$parent.tableRowColor(row, rowIndex);
      }
    },
    // 按钮点击事件
    // methods方法名 row当前点击列数据 index当前点击的index
    handleButton(methods, row, index) {
      this.$emit("clickButton", { methods: methods, row: row, index: index });
    },
    deleteSalaryFn(n) {
    },
    // 筛选数据显示为选中
    showSelected() {
      if (this.selectThing) {
        this.$nextTick(() => {
          this.realTableData.forEach((item) => {
            if (item.flag) {
              this.$refs.table.toggleRowSelection(item);
            }
          });
        });
      }
    },

    toggleRow(item) {
      this.$refs.table.toggleRowSelection(item);
    },
    // 清空选中项
    clearSelection() {
      this.$refs["table"].clearSelection();
    },
  },
  mounted() {
    this.getList();

    this.showSelected();
  },
  watch: {
    tableData: {
      handler(newsVal) {
        this.getList();
      },
      deep: true,
    },
    realTableData: {
      handler(newsVal) {
        this.showSelected();
      },
      deep: true,
    },
    total: {
      handler(newsVal, oldValue) {
        if (
          this.queryParamsData.current > 1 &&
          newsVal % this.queryParamsData.size == 0 &&
          newsVal < oldValue
        ) {
          this.queryParamsData.current--;
          this.changePage();
        }
      },
    },
    // templateSelection: {
    //   handler(newsVal) {
    //   },
    //  immediate:true
    // }
    queryParamsData: {
      handler(newsVal, oldValue) {},
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.targetTable {
  padding-bottom: 20px;
  // display: flex;
  // flex-direction: column;
  .el-table {
    flex: 1;
    overflow: scroll;
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  .el-table-column--selection .cell {
    padding: 0 !important;
  }
}
</style>
